<template>
  <!-- 显示评论 -->
  <comment-area-item-display
    ref="comment"
    :date="date"
    :name="name"
    :text="text"
    @reply-send="replyTo"
    @switch-edit="switchClick"
  >
    <!-- 显示 评论的评论(reply) -->
    <CommentAreaItemDisplay
      v-for="(reply, i) in replys_info_"
      :key="i"
      ref="comment_reply"
      :name="reply.name"
      :date="reply.date"
      :at="reply.at"
      :text="reply.text"
      @reply-send="replyTo"
      @switch-edit="switchClick_Child($event, i)"
    />
  </comment-area-item-display>
</template>

<script setup>
import { ref } from 'vue';
import CommentAreaItemDisplay from './CommentAreaItemDisplay.vue';
import { getDate } from '../features/DateTools';
import { useStore } from '../stores';
import { v4 as uuidv4 } from 'uuid';
import { publishReply } from '../api/api'
import { ElNotification } from 'element-plus';

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  name: {
    type: String,
    default: 'Unknown'
  },
  date: {
    type: String,
    default: '2023-01-01'
  },
  at: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  replys_info: {
    type: Array,
    default: []
  }
})

// 初始化replys
const replys_info_ =ref([])
replys_info_.value = props.replys_info

// 添加reply
const store = useStore()
const replyTo = (val) => {
  if (!store.userToken) {
    ElNotification({
      title: '评论失败',
      message: '请先登录哦 =￣ω￣=',
      type: 'error'
    })
    return false
  }
  if (!val) {
    ElNotification({
      title: '评论失败',
      message: '评论内容不能为空  ( ﹁ ﹁ ) ~→',
      type: 'error'
    })
    return false
  }
  let reply = {
    id: 'C' + uuidv4().substring(0, 6),
    userID: store.id,
    name: store.name,
    date: getDate(),
    at: val.at,
    text: val.text
  }
  replys_info_.value.push(reply)
  publishReply(props.id, replys_info_.value).then(response => {
    ElNotification({
      title: '评论成功',
      message: '请继续保持友善哦(๑•̀ㅂ•́)و✧',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '评论失败',
      message: error.message,
      type: 'error'
    })
  })

}

// 设置当前评论的 评论编辑框(pk) 可视
const comment = ref(null)         // 当前评论的dom
const comment_reply = ref(null)   // 当前 评论的评论(reply) 的dom[]

// 切换当前评论pk可视性
const switchClick = (val) => {
  // 如果开启当前评论pk 且 当前评论有reply，则关闭所有reply的pk
  if (val && comment_reply.value) {
    comment_reply.value.forEach(e => e.replyable = false)
  }
  emits('switchEditAll', val) // 向外部发送pk可视状态
}

// 当一个reply的pk可视时，设置当前评论的pk和其他reply的pk不可视
const switchClick_Child = (val, i) => {
  // 如果评论pk可视，则关闭
  if (comment.value.replyable) {
    comment.value.replyable = false
  }
  // 循环每个reply
  comment_reply.value.forEach((e, j) => {
    // 如果 非当前reply的pk可视，则关闭
    if (j != i && e.replyable) {
      e.replyable = false
    }
  })
  emits('switchEditAll', val) // 向外部发送pk可视状态
}

// if true -> closeAll 关闭所有pk，包括reply's
const closeAll = () => {
  comment.value.replyable = false
  if (comment_reply.value) {
    comment_reply.value.forEach((e) => e.replyable = false)
  }
}

// 将当前评论可视性传出
const emits = defineEmits(['switchEditAll'])

// 暴露closeAll方法
defineExpose({closeAll})
</script>